<template>
  <div class="rightPanel" :style="show">
    <div class="handle-button" @click="close">
      <i class="el-icon-setting"></i>
    </div>
    <div class="panelContent">
      <h3>系统布局配置</h3>
      <div class="panel_container">
        <div class="drawer-item">
          <span class="demonstration">主题色</span>
          <el-color-picker v-model="color" size='mini' show-alpha :predefine="predefineColors"
            @change="backColor"></el-color-picker>
        </div>
        <div class="drawer-item">
          <span class="demonstration">字体色</span>
          <el-color-picker v-model="color" size='mini' show-alpha :predefine="predefineColors"
            @change="fontColor"></el-color-picker>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightPanel',
  data() {
    return {
      color: 'rgba(30, 144, 255, 1)',
      predefineColors: [
        '#409EFF',
        '#1890FF',
        '#304156',
        '#212121',
        '#90ee90',
        '#00ced1',
        '#11A983'
      ],
      scssStyle: {
        background: "pink",
        color: 'black',
      },
      show3: true,
      show: {
        right: '-260px',
        background: 'white'
      }
    }
  },
  methods: {
    backColor() {
      this.show.background = this.color
      console.log(this.color);
    },
    fontColor() {
      this.show.color = this.color
    },
    close() {
      this.show.right == 0 ? this.show.right = '-260px' : this.show.right = 0
    }
  }
}

</script>

<style lang="scss" scoped>
@import '@/assets/theme/handle.scss';
@import '../../../element-variables.scss';


.rightPanel {
  width: 100%;
  max-width: 260px;
  height: 100vh;
  position: fixed;
  top: 0;
  /* right: -260px; */
  transition: all .25s cubic-bezier(.7, .3, .1, 1);
  box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.05);
  z-index: 10;
  text-align: center;

  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
  @include box_shadow('boxShadow')
}

.handle-button {
  width: 48px;
  height: 48px;
  position: absolute;
  font-size: 24px;
  border-radius: 6px 0 0 6px;
  background-color: rgb(24, 144, 255);
  line-height: 48px;
  pointer-events: autos;
  cursor: pointer;
  color: #fff;
  top: 280px;
  left: -48px;

  // @include background_color('mainColor');


}

.drawer-item {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.demonstration {
  line-height: 40px;
}
</style>